<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>高级隔行变色</title>
		<style>
			.main{
				width: 500px;
				height: 280px;
				margin: 0 auto;
			}
			#th_{
				background-color: #0098c9;
			}
			#th_ td{
				color: white;
				text-align: center;
			}

			table tr{
				height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<table border="1" cellpadding="0" cellspacing="0" bordercolor="#d0d0d0">
				<thead>
				<tr id="th_">
					<td width="110px">序号</td>
					<td width="133px">姓名</td>
					<td width="133px">课程</td>
					<td width="112px">成绩</td>
				</tr>
				</thead>
				<tbody  id="all_tr">
				<tr>
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>2</td>
					<td>吕布</td>
					<td>日语</td>
					<td>100</td>
				</tr>
				<tr>
					<td>3</td>
					<td>吕蒙</td>
					<td>营销学</td>
					<td>100</td>
				</tr>
				<tr>
					<td>4</td>
					<td>吕尚</td>
					<td>数学</td>
					<td>100</td>
				</tr>
				<tr>
					<td>5</td>
					<td>吕雉</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>6</td>
					<td>吕超</td>
					<td>体育</td>
					<td>100</td>
				</tr>
				</tbody>
			</table>
		</div>
		<script>
			var all_tr = document.getElementById("all_tr");
			var tr_chid = all_tr.children;
			for(var i=0 ; i<=tr_chid.length;i++)
			{
				if(i%2 == 0){
					tr_chid[i].style.backgroundColor = "#cccccc";	
				}
				else{
					tr_chid[i].style.backgroundColor = "#a3a3a3";
					
				}
				var color="";
				tr_chid[i].onmouseover=function(){
				color= this.style.backgroundColor;
					this.style.backgroundColor="#fff";
				}
				tr_chid[i].onmouseout=function(){
//					var color= this.style.backgroundColor;
					this.style.backgroundColor= color;
				}
			}
		</script>
	</body>
</html>
